var vm = new Vue({
	el: '#app',
	delimiters: ['[[', ']]'], // 修改vue模板符号，防止与django冲突
	data: {
		host: host,
		username: sessionStorage.username || localStorage.username,
		user_id: sessionStorage.user_id || localStorage.user_id,
		token: sessionStorage.token || localStorage.token,
		cat: '', // 当前商品类别
		page: 1, // 当前页数
		page_size: 5, // 每页数量
		ordering: '-create_time', // 排序
		count: 0,  // 总数量
		skus: [], // 数据
		cat1: {url: '', category:{name:'', id:''}},  // 一级类别
		cat2: {name:''},  // 二级类别
		cat3: {name:''},  // 三级类别,
		cart_total_count: 0, // 购物车总数量
		cart: [], // 购物车数据
		hots: [], // 热销商品
	},
	computed: {
		total_page: function(){  // 总页数
			return Math.ceil(this.count/this.page_size);
		},
		next: function(){  // 下一页
			if (this.page >= this.total_page) {
				return 0;
			} else {
				return this.page + 1;
			}
		},
		previous: function(){  // 上一页
			if (this.page <= 0 ) {
				return 0;
			} else {
				return this.page - 1;
			}
		},
		page_nums: function(){  // 页码
			// 分页页数显示计算
			// 1.如果总页数<=5
			// 2.如果当前页是前3页
			// 3.如果当前页是后3页,
			// 4.既不是前3页，也不是后3页
			var nums = [];
			if (this.total_page <= 5) {
				for (var i=1; i<=this.total_page; i++){
					nums.push(i);
				}
			} else if (this.page <= 3) {
				nums = [1, 2, 3, 4, 5];
			} else if (this.total_page - this.page <= 2) {
				for (var i=this.total_page; i>this.total_page-5; i--) {
					nums.push(i);
				}
			} else {
				for (var i=this.page-2; i<this.page+3; i++){
					nums.push(i);
				}
			}
			return nums;
		}
	},
	mounted: function(){
		this.cat = this.get_query_string('cat');
		this.get_skus();
		this.get_hot_goods();
		axios.get(this.host+'/categories/'+this.cat+'/', {
				responseType:'json'
			})
			.then(response => {
				this.cat1 = response.data.cat1;
				this.cat2 = response.data.cat2;
				this.cat3 = response.data.cat3;
			})
			.catch(error => {
				console.log(error.response.data)
			});
		// this.get_cart();
		// this.get_hot_goods();
	},
	methods: {
		logout(){
			sessionStorage.clear();
			localStorage.clear();
			location.href = '/login.html';
		},
		// 获取url路径参数
		get_query_string: function(name){
			var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
			var r = window.location.search.substr(1).match(reg);
			if (r != null) {
				return decodeURI(r[2]);
			}
			return null;
		},
		// 请求商品列表数据
		get_skus: function(){
			axios.get(this.host+'/categories/'+this.cat+'/skus/', {
					params: {
						page: this.page,
						page_size: this.page_size,
						ordering: this.ordering
					},
					responseType: 'json'
				})
				.then(response => {
					this.count = response.data.count;
					this.skus = response.data.results;
					for(var i=0; i<this.skus.length; i++){
						this.skus[i].url = '/goods/' + this.skus[i].id + ".html";
					}
				})
				.catch(error => {
					console.log(error.response.data);
				})
		},
		// 点击页数
		on_page: function(num){
			if (num != this.page){
				this.page = num;
				this.get_skus();
			}
		},
		// 点击排序
		on_sort: function(ordering){
			if (ordering != this.ordering) {
				this.page = 1;
				this.ordering = ordering;
				this.get_skus();
			}
		},
		// 获取购物车数据
		get_cart: function(){
			axios.get(this.host+'/cart/', {
					headers: {
						'Authorization': 'JWT ' + this.token
					},
					responseType: 'json',
					withCredentials: true
				})
				.then(response => {
					this.cart = response.data;
					this.cart_total_count = 0;
					for(var i=0;i<this.cart.length;i++){
						if (this.cart[i].name.length>25){
							this.cart[i].name = this.cart[i].name.substring(0, 25) + '...';
						}
						this.cart_total_count += this.cart[i].count;

					}
				})
				.catch(error => {
					console.log(error.response.data);
				})
		},
		// 获取热销商品数据
		get_hot_goods: function(){
			axios.get(this.host+'/categories/'+this.cat+'/skus/', {
				params: {
					ordering: '-sales'
				},
				responseType: 'json'
			})
			.then(response => {
				this.hots = response.data.results;
				for(var i=0; i<this.hots.length; i++){
					this.hots[i].url = '/goods/' + this.hots[i].id + ".html";
				}
			})
			.catch(error => {
				console.log(error.response.data);
			})
		}
	}
});